import { Link } from "react-router-dom";
import './index.less'
import { Routes, Route } from "react-router-dom";
import Hook from "../Hook";
import TodoListWithHook from "../TodoListWithHook";
import Redux from "../Redux";
import TodoListWithRedux from "../TodoListWithRedux";
import Test from "../Test";
import Chat from "../Chat";
import { MyContext, createReducer } from '../Hook/ContextReducer'

export default function App() {
  return (
    <MyContext.Provider value={createReducer()}>
      <div className="app">
        <Link to="/test"><h1>react</h1></Link>
        <Link className="nav" to="/test">Test</Link>
        <Link className="nav" to="/chat">Chat</Link>
        <Link className="nav" to="/hook">Hook</Link>
        <Link className="nav" to="/todoListWithHook">TodoListWithHook</Link>
        <Link className="nav" to="/redux">redux</Link>
        <Link className="nav" to="/todoListWithRedux">todoListWithRedux</Link>
        <div className="content">
          <Routes>
            <Route path="/" element={<Test />} />
            <Route path="/test" element={<Test />} />
            <Route path="/chat" element={<Chat />} />
            <Route path="/hook" element={<Hook initNumber={3} />} />
            <Route path="/todoListWithHook" element={<TodoListWithHook />} />
            <Route path="/redux" element={<Redux />} />
            <Route path="/todoListWithRedux" element={<TodoListWithRedux />} />
          </Routes>
        </div>
      </div>
    </MyContext.Provider>
  );
}